<template>
  <div class="todo-list">
    <h2>自律一下</h2>
    <div class="add-todo">
      <input
        v-model="newTodoTitle"
        placeholder="添加新的待办事项"
        @keyup.enter="addTodo"
      />
      <button @click="addTodo">添加</button>
    </div>
    <div v-for="(todo, index) in todos" :key="index" class="todo-container">
      <TodoItem
        :title="todo.title"
        :completed="todo.completed"
        @update:completed="updateTodoCompleted(index, $event)"
        @remove-todo="removeTodo(index)"
      />
    </div>
  </div>
</template>

<style scoped>
.todo-list {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.add-todo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
input {
  width: 70%;
  padding: 5px;
  margin-right: 10px;
}
button {
  padding: 5px 10px;
  background-color: green;
  color: white;
  border: none;
  cursor: pointer;
}
.todo-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
</style>